<script>
	import Map from "./Map.svelte";

	import { mapValue } from "./mapStore";
</script>

<input bind:value={$mapValue} type="number" />

<Map />
<Map />

<style>
</style>

In this example we have an App with a few Map components. The Map components import a store from mapStore.js. The reason we don't create the store inside of the Map component is that that would end up with a store for each Map component (meaning a state within each component) instead of a separate shared store used by every Map component.

We only have one store instance, this is called a singleton . We are also using it in the main App.svelte as well where the store value is bound to the input field.

We have another file called mapData.js containing another singleton, currentMap . It contains a function to update the currentMap to another map. Since we're exportíng the value with export let currentMap; it will update where we are importing it (inside our Map component).

It is not super nice though to have to have a separate .js file with the store for our Map components since they are so tightly coupled. Importing the store from a separate file makes it seem like it's a separate thing (something that's supposed to be used everywhere within the app for example).

Is there a way to improve this? Let's see!

<script>
	import Map, { mapValue } from "./Map2.svelte";
</script>

<input bind:value={$mapValue} type="number" />

<Map />
<Map />

<style>
</style>

Here is the version using <script context="module"/> . It allows us to have a module level script tag inside our Svelte component. All of our instances will have the same data in that script tag so we can put the functions and store we had in the .js files in there instead and it will still work. We can even export the store from Map2 and import it in App2 with this line: import Map, { mapValue } from "./Map2.svelte"; .

The one thing we can't do is have a default export since in Svelte the component itself is the default export .

Another thing to keep in mind is that the module level variables are not state and we can not change them from within our markup like we normally can in our instance level script tag.

<script context="module">
	// These will only run once!
	let count = 0;
	console.log(count);
</script>

<script>
</script>

Value: {count}
<button on:click={() => count++}>Increment (does not work)</button>

<style>
</style>

To fix this we can again use a store which will give us a reactive variable (assuming we interact with it as a store).

<script>
	import CountComponent from "./CountComponent.svelte";
</script>

<CountComponent />
<CountComponent />
<CountComponent />

<style>
</style>

We can even do something fun like this:

<script>
	import CountComponent2 from "./CountComponent2.svelte";

	let instances = 2;
</script>

<button on:click={() => instances++}>Add instance</button>
<button on:click={() => instances--}>Remove instance</button>

{#each Array.from({ length: instances }) as _}
	<CountComponent2 />
{/each}

<style>
</style>

Probably a bit overkill but at least it's possible!